<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
  >
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    #scroll-container {
      height: 260px;
      overflow-y: auto;
    }

    .item {
      height: 50px;
      line-height: 50px;
      border: 1px solid #ccc;
    }
  </style>
</head>

<body>
  <div id="scroll-container">
    <div id="items-container">
      <!-- 生成的虚拟内容 -->
    </div>
  </div>

  <script>
    const container = document.getElementById('scroll-container');
    const itemsContainer = document.getElementById('items-container');
    let start = 0; // 起始渲染索引
    let end = 50; // 结束渲染索引
    let itemsHeight = 50; // 每个项目的高度

    function renderItems(start, end) {
      itemsContainer.innerHTML = ''; // 清空内容
      for (let i = start; i < end; i++) {
        const item = document.createElement('div');
        item.className = 'item';
        item.textContent = `Item ${i}`;
        itemsContainer.appendChild(item);
      }
    }

    function updateItems() {
      const scrollTop = container.scrollTop;
      start = Math.floor(scrollTop / itemsHeight);
      end = start + Math.ceil(container.clientHeight / itemsHeight) + 1;
      renderItems(start, end);
    }

    container.addEventListener('scroll', updateItems);

    // 初始渲染
    renderItems(start, end);
  </script>


</body>

</html>